<template>
  <view class="container bs-address-form">
    <view class="common-header-xian"></view>
    <!-- 表单 -->
    <form @submit="saveData">
      <view class="address-cont-title b-f b-b">
        <view class="list address-box dis-flex b-b">
          <view class="left-name">
            <text class="f-30">名称：</text>
          </view>
          <view class="right-cont flex-box">
            <input name="title" placeholder="请输入发票抬头名称" v-model="form.title" required/>
          </view>
        </view>

      </view>
      <view class="address-cont-title b-f b-b">
        <view class="list address-box dis-flex b-b">
          <view class="left-name">
            <text class="f-30">税号：</text>
          </view>
          <view class="right-cont flex-box">
            <input name="tax_number" placeholder="请输入纳税人识别号" v-model="form.tax_number" required/>
          </view>
        </view>
        <view class="list address-box dis-flex">
          <view class="left-name">
            <text class="f-30">邮箱：</text>
          </view>
          <view class="right-cont flex-box">
            <input name="email" placeholder="请输入邮箱，用于接收(选填)" v-model="form.email"/>
          </view>
        </view>
      </view>
      <view class="address-cont-title b-f b-b">
        <view class="list address-box dis-flex b-b">
          <view class="left-name">
            <text class="f-30">开户行：</text>
          </view>
          <view class="right-cont flex-box">
            <input name="bank_name" placeholder="请输入开户行(选填)" v-model="form.ank_name"/>
          </view>
        </view>
        <view class="list address-box dis-flex">
          <view class="left-name">
            <text class="f-30">开户账号：</text>
          </view>
          <view class="right-cont flex-box">
            <input name="bank_account" placeholder="请输入开户账号(选填)" v-model="form.bank_account"/>
          </view>
        </view>
      </view>

      <view class="address-cont-title b-f b-b">
        <view class="list address-box dis-flex b-b">
          <view class="left-name">
            <text class="f-30">单位地址：</text>
          </view>
          <view class="right-cont flex-box">
            <input name="address" placeholder="请输入单位地址(选填)" v-model="form.address"/>
          </view>
        </view>
        <view class="list address-box dis-flex">
          <view class="left-name">
            <text class="f-30">公司电话：</text>
          </view>
          <view class="right-cont flex-box">
            <input maxlength="11" name="mobile" placeholder="请输入公司电话(选填)" type="number" v-model="form.mobile"/>
          </view>
        </view>
      </view>

      <view class="address-cont-title b-f b-b">
        <view class="list address-box dis-flex b-b">
          <view class="left-name">
            <text class="f-30">默认：</text>
          </view>
          <view class="right-cont flex-box">
            <radio-group name="is_default" @change="setDefault">
              <label class="radio">
                <radio value="1" :checked="form.is_default==1"/>
                是</label>
              <label class="radio">
                <radio value="0" :checked="form.is_default==0"/>
                否</label>
            </radio-group>
          </view>
        </view>
        <view class="list address-box dis-flex">
          <view class="left-name">
            <text class="f-30">发票类型：</text>
          </view>
          <view class="right-cont flex-box">
            <radio-group name="type" @change="setType">
              <label class="radio">
                <radio value="0" :checked="form.type==0"/>
                普通增值税</label>
              <label class="radio">
                <radio value="1" :checked="form.type==1"/>
                专业增值税</label>
            </radio-group>
          </view>
        </view>
      </view>
      <view class="padding-box m-top20 profile-btn">
        <button formType="submit" :disabled="disabled">保存</button>
      </view>
    </form>
  </view>
</template>

<script>
import {detail, action} from "@/common/invoice_api";

export default {
  data() {
    return {
       disabled: false,
      form: {
        invoice_id: 0,
        title: '',
        tax_number: '',
        mobile: '',
        email: '',
        is_default: 0,
        type: 0,//发票类型：0=普通增值税，1=专业增值税
        tax_rate: 0,
        bank_name: '',
        bank_account: '',
        address: ''
      }
    };
  },
  onLoad: function (options) {
    if (options.id) {
      this.getInfo(options.id)
    }
  },
  methods: {
    getInfo(id) {
      detail({invoice_id: id}).then(res => {
        if (res.code !== 0) {
          this.$u.toast(res.msg)
          return false
        }
        this.setData({
          form: res.data
        })
      })
    },

    setDefault(e) {
      let that = this;
      that.setData({
        form: {
          ...that.form,
          is_default: parseInt(e.detail.value)
        }
      });
    },
    setType(e) {
      let that = this;
      that.setData({
        form: {
          ...that.form,
          type: parseInt(e.detail.value)
        }
      });
    },
    /**
     * 表单提交
     */
    saveData: function (e) {
      let that = this;
      // 表单验证
      if (!that.validation(this.form)) {
        that.$u.toast(that.error);
        return false;
      }

      // 按钮禁用
      that.setData({
        disabled: true
      });
      // 提交到后端
      action(this.form).then(res => {
        that.$u.toast(res.msg)
        if (res.code === 0) {
          uni.navigateBack();
        }
      }).finally(() => {
        that.setData({
          disabled: false
        })
      })
    },

    /**
     * 表单验证
     */
    validation: function (values) {
      console.log(values)
      if (values.title === '') {
        this.error = '发票抬头未设置';
        return false;
      }
      if (values.tax_number === '') {
        this.error = '税号未设置';
        return false;
      }

      return true;
    },


  }
};
</script>
<style lang="scss" scoped>
@import 'form.scss';
</style>
